<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <TableFilter />
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
// import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { report } from '@neu/dcam-ui/api/stock'
import { formatDate } from '@neu/biz-core/utils/utils'

export default {
  name: 'StockReportPage',
  components: {
    TableFilter,
    // ActionBar,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: report,
      insideColumns: [
        { title: '货品编号', width: 150, key: 'storckNumber' },
        { title: '分类', width: 150, key: 'spareTypeName' },
        { title: '规格型号', key: 'specification' },
        { title: 'SN码', key: 'sn' },
        {
          title: '备品来源',
          width: 140,
          key: 'source',
          render: (h, params) => {
            let sourceDesc = ''
            if (params.row.source === 'new') {
              sourceDesc = '合同采购'
            } else if (params.row.source === 'back') {
              sourceDesc = '退库利旧'
            }
            return h('span', [
              h('el-tag', sourceDesc)
            ])
          }
        },
        { title: '关联合同', width: 140, key: 'contractName' },
        { title: '单价', width: 140, key: 'unitPrice', render: (h, params) => { return h('span', params.row.unitPrice + ' 元') } },
        { title: '入库时间', width: 140, key: 'createTime' },
        { title: '出库时间', width: 150, key: 'updateTime',
        render: (h, params) => {
          return h('span', params.row.status === 'used' ? params.row.updateTime : '-')
        }  }
      ]
    }
  },
  created() {
    this.filter({s_status: 'used'})
  }
}
</script>
